How to set the Background of an Ink Control
Description
You can set the background image shown in the ink control to anything you want - either by specifying the URL or the base64 encoded data for an image.
Setting the Ink Background
Images can be used as a background for the ink control. Using the <InkObject>.setBackground() method, you can set the background to an image URL or a base64 encoded image. For example,
var inkControl = {dialog.object}.getControl('INK1');
inkControl.setBackground({ image: { data: url} });Watch the video below, which demonstrates setting the background of an Ink control to an image using an image stored in AmazonS3. The video also demonstrates how to set the background to a map, which is generated as a base64 encoded image using the A5.map.staticMap method.
Controlling the "isDirty" State of the Ink Control when Setting the Background Image
When setting the background for an Ink control using the <InkObject>.setBackground() method, you can specify whether or not the background image should be submitted as part of the Ink data. The save property can be used to specify if the background image should be submitted as part of the Ink data.
For example, the following Ajax callback updates the background image for an Ink control, specifying that the image should not be saved with the Ink data:
function xb as c (e as p)
dim fn as c
fn = "C:\movieimages\4295.jpg"
dim b as b
b = file.to_blob(fn)
dim b64 as c
b64 = base64encode(b)
b64 = "data:image/jpg;base64," + b64
dim js as c
js = <<%js%
var inkObj = {dialog.object}.getControl('INK1');
var _obj = {save: false, image: { data: '__b64__'}};
inkObj.setBackground(_obj);
%js%
js = stritran(js,"__b64__",js_escape(b64))
xb = js
end functionWhen the data is submitted to the server, the base64 encoded image, "4295.jpg", will be omitted from the data for the Ink control.
To learn more, watch the video below.
Setting the Ink Control Background Image
Setting the background image in the Ink Control is a common practice. In this video we discuss various aspects of how you can set the Ink control image background and control whether the UX goes dirty when the Ink background is set.
See Also